<!--
 * @Author: your name
 * @Date: 2022-01-10 09:23:55
 * @LastEditTime: 2022-01-16 07:29:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\views\blog\components\BlogTOC.vue
-->
<template>
    <div class="blogTOC-container">
        <RightList :data = "newBlogTOCData" @select="handleSelect"/> 
    </div>
</template>

<script>
// 目录组件
import RightList from "./rightList.vue"
import eventBus from "../../../utils/eventBus"
    export default {
        props:{
            blogTOCData:{
                type:Array,
                default:() => []
            }
        },
        data(){
            return {
                // 默认展示概述
                anchor:"article-md-title-1",
                overviewHTML:null,
                newBlogTOCData:[],
                arrHTML:[],
            }
        },
        created(){
            // console.log(this.blogTOCData)
            this.handleBlogTOCData
        },
        components:{
            RightList,
        },
        computed:{
            handleBlogTOCData(){
                this.traverse(this.blogTOCData, this.newBlogTOCData)
            },
        },
        mounted(){
            const overview = document.getElementById("article-md-title-1")
            // console.log(overview.offsetTop)
            this.overviewHTML = overview
    
            this.getHTML(this.newBlogTOCData)
            // console.log(this.arrHTML)
            
            // eventBus.$emit("handle")
            eventBus.$on("handleScroll", this.handleScroll)
            
        },
        methods:{
            handleScroll(){
                for(let i = 0; i < this.arrHTML.length; i++){
                    if(this.arrHTML[i].getBoundingClientRect().top > 0 && this.arrHTML[i].getBoundingClientRect().top < 200){
                        // console.log(this.arrHTML[i].getAttribute("id"))
                        this.anchor = this.arrHTML[i].getAttribute("id")
                    }else if(this.arrHTML[i].getBoundingClientRect().top > 200){
                        if(i === 0){
                            
                        }
                    }
                }
            },
            getHTML(arr){
                for(let i = 0; i < arr.length; i++){
                    this.arrHTML.push(document.getElementById(arr[i].anchor))
                    if(arr[i].children){
                        this.getHTML(arr[i].children)
                    }
                }
            },
            traverse(arr, newArr){
                for(let i = 0; i<arr.length; i++){
                    const obj = {}
                    for(const value in arr[i]){
                        // console.log(typeof(arr[i][value]))
                        if(typeof(arr[i][value]) === "object"){
                            obj[value] = [];
                            this.traverse(arr[i][value], obj[value])
                        }else{
                            obj[value] = arr[i][value]
                            obj.active = arr[i].anchor === this.anchor
                        }
                    }
                    newArr.push(obj)
                }
            },
            getrouteInfo(){
                // console.log(this.$route.hash ? this.$route.hash.split("#")[1] : this.blogTOCData[0].anchor)
                return this.$route.hash ? this.$route.hash.split("#")[1] : this.blogTOCData[0].anchor
            },
            handleSelect(e){
                // console.log(e)
                location.hash = e.anchor
            },
        },
        watch:{
            $route(){
                // 观察hash值变化
                // console.log(this.$route.hash.split("#")[1])
                // 更新目录选中状态
                // this.handleBlogTOCData
                // console.log(this.blogTOCData[3].active)
                this.blogTOCData[3].active = true
                // console.log(this.blogTOCData[3].active)
                // console.log(this.blogTOCData)
                // 找到对应的dom元素
                const hashHTML = document.getElementById(this.$route.hash.split("#")[1])
                
            },
            anchor(val){
                this.newBlogTOCData = []
                this.handleBlogTOCData
            }
        }
    }
</script>

<style scoped>

</style>